import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableWithoutFeedback } from 'react-native';
import Icon from "react-native-vector-icons/Entypo"

export default class Shops extends Component {
    constructor(props) {
        super(props);
        this.showShop = this.showShop.bind(this);
    }

    showShop(){
        const { navigate }  = this.props.navigation;
        navigate("Shop");
    }

    render() {
        const uri = 'https://p3a.pstatp.com/weili/l/189459640379245199.jpg';
        const shops = [
            {name:'大悦城观光店',distance:'11.1km',coupons:'',img:uri},
            {name:'龙湖天地试验店',distance:'600m',coupons:'',img:uri},
            {name:'银泰旗舰店',distance:'23.9km',coupons:'',img:uri},
        ];
        const { navigate }  = this.props.navigation;

        return (
            <View style={styles.box}>
                {shops.map((item,index) => {
                    const img = item.img;
                    return <TouchableWithoutFeedback key={index} onPress={()=>{
                        navigate("Shop");
                    }}>
                        <View style={styles.shopCard}>
                            <View style={styles.previewBox}>
                                <Image style={styles.preview} source={{uri:img}}/>
                            </View>
                            <View style={{paddingLeft: 15,paddingTop:20,paddingBottom:30}}>
                                <View style={styles.distance}>
                                    <Icon style={{}} name='location-pin' size={25} color="#fc8327"/>
                                    <Text style={styles.distanceText}>{item.distance}</Text> 
                                </View>
                                <View style={{paddingBottom:15,paddingTop:5}}>
                                    <Text style={{fontSize:21,fontWeight:"bold"}}>{item.name}</Text>
                                </View>
                                <Text style={{fontSize:16,color:"#999"}}>暂无可用优惠券</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                })}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    box: {
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 20,
        backgroundColor:"#fafafa"
    },
    shopCard: {
        borderRadius: 20,
        marginBottom: 30,
        backgroundColor:"white"
    },
    previewBox:{
        borderTopLeftRadius:20,
        borderTopRightRadius:20,
        overflow: 'hidden'
    },
    preview:{
        height: 140,
        overflow: 'hidden'
    },
    distance: {
        display: "flex",
        flexDirection: "row",
        height: 30,
        alignItems: "center"
    },
    distanceText: {
        fontSize: 18,
        color: "#fc8327",
    }
});